<template>
  <div class="company-list">
    <!-- 顶部标题区域 -->
    <div class="header">
      <h1 class="title">企业合作伙伴</h1>
      <p class="subtitle">优质企业合作，助力职业发展</p>
    </div>
    
    <!-- 分类标签栏 -->
    <div class="categories">
      <div 
        v-for="(category, index) in categories" 
        :key="index" 
        class="category-item"
        :class="{ active: currentCategory === category.value }"
        @click="selectCategory(category.value)"
      >
        <i :class="category.icon"></i>
        <span>{{ category.name }}</span>
      </div>
    </div>
    
    <!-- 公司Logo网格 -->
    <div class="companies-grid">
      <div 
        v-for="(company, index) in filteredCompanies" 
        :key="index" 
        class="company-card"
        @click="showCompanyDetail(company)"
      >
        <div class="logo-container">
          <!-- 实际项目中这里使用真实图片 :src="company.logo" -->
          <img v-if="company.logo_url" :src="getLogoUrl(company.logo_url)" :alt="company.name" class="logo">
          <div v-else class="logo" :style="getLogoStyle(company)">
            {{ company.name.charAt(0) }}
          </div>
        </div>
        <div class="company-name">{{ company.name }}</div>
      </div>
    </div>
    
    <!-- 通知消息 -->
    <div class="notification" :class="{ show: notificationVisible }">
      公司介绍：{{ selectedCompany }} 
    </div>
  </div>
</template>

<script>
import { CampatydataApi  } from '../utils/api'
import apiConfig from '../utils/apiConfig'
export default {
  name: 'CampatyList',
  data() {
    return {
      currentCategory: 'all',
      selectedCompany: '',
      notificationVisible: false,
      categories: [
        { name: '全部企业', value: 'all', icon: 'fas fa-layer-group' },
        { name: '科技行业', value: 'tech', icon: 'fas fa-microchip' },
        { name: '金融服务', value: 'finance', icon: 'fas fa-chart-line' },
        { name: '咨询服务', value: 'consulting', icon: 'fas fa-users' },
        { name: '制造企业', value: 'manufacture', icon: 'fas fa-industry' },
        { name: '电子商务', value: 'ecommerce', icon: 'fas fa-shopping-cart' }
      ],
      companies: []
    }
  },
  computed: {
    // 根据当前分类筛选公司
    filteredCompanies() {
      if (this.currentCategory === 'all') return this.companies;
      return this.companies.filter(company => company.category === this.currentCategory);
    }
  },
  async mounted() {
    // 组件挂载时获取公司数据
    await this.fetchCompanies();
  },
  methods: {
 // 获取公司数据
    async fetchCompanies() {
      try {
        const response = await CampatydataApi.getCampatyDataList();
        // 假设API返回的数据结构与原数据类似
        this.companies = response.data || response;
      } catch (error) {
        console.error('获取公司数据失败:', error);
        // 出错时使用原始数据作为后备
        this.companies = [
          { id: 1, name: '腾讯科技', category: 'tech', color: '#07C160' },
          { id: 2, name: '阿里巴巴', category: 'tech', color: '#FF6A00' },
          { id: 3, name: '华为技术', category: 'tech', color: '#FF0000' },
          { id: 4, name: '字节跳动', category: 'tech', color: '#000000' },
          { id: 5, name: '招商银行', category: 'finance', color: '#F74F44' },
          { id: 6, name: '平安保险', category: 'finance', color: '#FFDE17' },
          { id: 7, name: '中国银行', category: 'finance', color: '#BF242A' },
          { id: 8, name: '中信证券', category: 'finance', color: '#00A650' },
          { id: 9, name: '麦肯锡咨询', category: 'consulting', color: '#A6192E' },
          { id: 10, name: '波士顿咨询', category: 'consulting', color: '#00A9B5' },
          { id: 11, name: '毕马威', category: 'consulting', color: '#009B5F' },
          { id: 12, name: '埃森哲', category: 'consulting', color: '#B73944' },
          { id: 13, name: '宁德时代', category: 'manufacture', color: '#FF6900' },
          { id: 14, name: '比亚迪', category: 'manufacture', color: '#0038B8' },
          { id: 15, name: '美的集团', category: 'manufacture', color: '#D7212D' },
          { id: 16, name: '海尔集团', category: 'manufacture', color: '#E60012' },
          { id: 17, name: '京东商城', category: 'ecommerce', color: '#E2231A' },
          { id: 18, name: '拼多多', category: 'ecommerce', color: '#DF3A06' },
          { id: 19, name: '唯品会', category: 'ecommerce', color: '#C62020' },
          { id: 20, name: '小红书', category: 'ecommerce', color: '#FF2444' }
        ];
      }
    },  
    // 处理logo图片URL
    getLogoUrl(logoUrl) {
      // 如果logoUrl已经是完整URL，则直接返回
      if (logoUrl.startsWith('http')) {
        return logoUrl;
      }
        // 如果是相对路径，则加上图片基础URL
      const baseUrl = apiConfig.imageBaseURL.development;
      // 处理路径中的重复斜杠
      if (logoUrl.startsWith('/')) {
        return baseUrl + logoUrl;
      } else {
        return baseUrl + '/' + logoUrl;
      }
    },
    // 选择分类
    selectCategory(category) {
      this.currentCategory = category;
    },
    
    // 显示公司详情
     showCompanyDetail(company) {
      // 跳转到公司详情页
      this.$router.push({ 
        name: 'CampanyDetail',
        query: { id: company.id, flarum_tag_id: company.flarum_tag_id }
      });
    },
    
    // 生成Logo样式
    getLogoStyle(company) {
      return {
        backgroundColor: company.color,
        boxShadow: `0 5px 15px ${company.color}40`,
        color: '#ffffff'
      };
    }
  }
}
</script>

<style scoped>
.company-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 36px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 12px;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #10b981);
  border-radius: 2px;
}

.subtitle {
  font-size: 18px;
  color: #718096;
  margin-top: 20px;
}

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
}

.category-item {
  padding: 12px 25px;
  border-radius: 50px;
  background-color: #f8fafc;
  color: #4a5568;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 2px solid #edf2f7;
}

.category-item i {
  margin-right: 10px;
  font-size: 18px;
}

.category-item:hover {
  background-color: #e2e8f0;
  transform: translateY(-3px);
}

.category-item.active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  box-shadow: 0 6px 12px rgba(79, 70, 229, 0.25);
}

.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px;
}

.company-card {
  background: white;
  border-radius: 16px;
  padding: 25px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
}

.company-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-color: #e2e8f0;
}

.logo-container {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.company-card:hover .logo {
  transform: scale(1.1);
}

.company-name {
  font-size: 16px;
  color: #2d3748;
  font-weight: 600;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification {
  position: fixed;
  top: 30px;
  right: 30px;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.35);
  transform: translateX(200%);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
  font-weight: 500;
}

.notification.show {
  transform: translateX(0);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .companies-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  .companies-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  
  .title {
    font-size: 30px;
  }
  
  .subtitle {
    font-size: 16px;
  }
  
  .category-item {
    padding: 10px 18px;
    font-size: 14px;
  }
  
  .company-card {
    height: 180px;
    padding: 20px 15px;
  }
  
  .logo-container {
    height: 85px;
  }
}

@media (max-width: 576px) {
  .categories {
    gap: 10px;
  }
  
  .companies-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
  }
  
  .header {
    margin-bottom: 30px;
  }
  
  .title {
    font-size: 26px;
  }
  
  .company-card {
    height: 160px;
    padding: 18px 12px;
  }
  
  .logo {
    width: 70px;
    height: 70px;
  }
}
</style>